import React,{Component} from 'react'
// import Header from '../component/header'

class Ball extends Component {
    constructor(props) {
        super(props);
        this.state = {
            top: this.props.ballAttr.top,
            left: this.props.ballAttr.left,
        };
    }
    componentDidMount() {
        console.log(this.props.ballAttr)
        let top = this.props.ballAttr.top;
        let left = this.props.ballAttr.left;
        let intervalY = this.props.ballAttr.intervalY;
        let intervalX = this.props.ballAttr.intervalX;
        // this.setState({top, left})
        // console.log(this.props.ballAttr.intervalMaxY)
        setInterval(() => {
            if((intervalY >0 && top + intervalY > this.props.ballAttr.intervalMaxY) || (intervalY < 0 && top + intervalY < 0)){
                intervalY = - intervalY
            }
            if((intervalX >0 && left + intervalX > this.props.ballAttr.intervalMaxX) || (intervalX < 0 && left + intervalX < 0)){
                intervalX = - intervalX
            }
            top += intervalY
            left += intervalX
            this.setState({top, left})
        }, this.props.ballAttr.time )
    }
    render() {
        const attr = this.props.ballAttr
        const ballStyle = {
            position: 'fixed',
            width: 2*attr.r,
            height: 2*attr.r,
            borderRadius: attr.r,
            background: attr.color,
            top: this.state.top,    // value的值為number或string
            left: this.state.left,
        }
        return (
            <div className="ball" style={ballStyle}>
            </div>
        );
    }
}

class Balls extends Component {
    constructor(props) {
        super(props);
        this.state = {
           w: 300,
           h: 300,
        };
    }
  componentDidMount() {
    console.log('--------------')
    console.log(this.refs.balls)
    console.log(this.refs.balls.offsetHeight, this.refs.balls.offsetWidth)
    this.setState({
        w: this.refs.balls.offsetWidth,
        h: this.refs.balls.offsetHeight
    })
  }
  randoms(min, max){
        return parseInt(Math.random()*(max-min) + min)
    }
  ballAttr() {
    const r = this.randoms(12,36)
    return {
        r: r,
        color: `rgba(${this.randoms(0,255)}, ${this.randoms(0,255)}, ${this.randoms(0,255)}, ${this.randoms(0,10)/10})`,
        top: this.randoms(0,this.state.h - 2*r),
        left: this.randoms(0,this.state.w - 2*r),
        time: 2,
        intervalX: this.randoms(10,20),
        intervalY: this.randoms(10,20),
        intervalMaxX: this.state.w - 2*r,
        intervalMaxY: this.state.h - 2*r,
    }
  }
  render() {
    const ballsStyle = {
          width: '100%',
          height: '100%',
          background: '#000',
      }
    // const size = this.randoms(12,36)
      let balls = [];
    for(let i = 0; i< 50; i++) {
        let ballAttr = this.ballAttr()
        // console.log(ballAttr)
        balls.push(<Ball ballAttr={ballAttr} key={i}/>)
    }
    return (
      <div className="balls" style={ballsStyle} ref="balls">
          {/*<Ball ballAttr={this.ballAttr()}/>*/}
          {balls}
      </div>
    );
  }
}

// ReactDOM.render(<History />, document.getElementById('root'));
export default Balls
